<div class="space-y-4">
  <img
    class="mx-auto max-h-48"
    src="./assets/undraw/undraw_Mailbox_re_dvds.svg" />
  <div class="flex items-center space-x-1">
    <ng-container *ngIf="isBackButtonShown">
      <span class="text-sm text-black dark:text-gray-300">
        {{ isRetry ? input.textAfterFailure : input.textAfterSuccess }}
      </span>
    </ng-container>
    <ng-container *ngIf="!isBackButtonShown">
      <ng-icon class="text-green-500" name="heroCheckCircle" size="1.5rem" />
      <span class="text-sm text-black dark:text-gray-300">
        {{ isRetry ? input.textFailure : input.textSuccess }}
      </span>
    </ng-container>
  </div>
  <div class="flex justify-between" *ngIf="isBackButtonShown">
    <button
      class="wsl-btn-lg wsl-btn-secondary flex items-center space-x-1"
      type="button"
      role="button"
      (click)="back()">
      <ng-icon class="h-4" name="heroChevronDoubleLeft" size="1.25rem" />
      <span>Back</span>
    </button>
    <button
      class="wsl-btn-lg wsl-btn-secondary flex items-center space-x-1"
      type="button"
      role="button"
      (click)="resend()">
      <ng-icon class="h-4" name="featherMail" size="1.25rem" />
      <span>Resend</span>
    </button>
  </div>
</div>
